<template>
	<div class="swiper">
		<swiper :options="swiperOption" >
		    <!-- slides -->
		   <!-- <swiper-slide>
		    	<img src="@/assets/img/swiper02.jpg" />
		    </swiper-slide>
		   <swiper-slide>
		    	<img src="@/assets/img/swiper02.jpg" />
		    </swiper-slide>
		    <swiper-slide>
		    	<img src="@/assets/img/swiper03.jpg" />
		    </swiper-slide>-->
		    
		    
		    <swiper-slide v-for="item in swiperList" :key="item.id">
		    	<img :src="item.imgUrl" />
		    </swiper-slide>
		    
		    
		    <!-- Optional controls -->
		    <div class="swiper-pagination"  slot="pagination"></div>

		 </swiper>
	</div>
</template>

<script>
export default{
    props:["swiperList"],
	data() {
      return {
        swiperOption: {
	          pagination: {
	            el: '.swiper-pagination'
	          },
	          loop:true,
	          autoplay:true
        }
      }
    }
}
	
</script>

<style scoped>
	.swiper{
		width: 100%;
		height: 1rem;
	}
	.swiper img{
		width: 100%;
		height: 100%;
	}
	
	.swiper >>> .swiper-pagination-bullet-active {
	    background: #FFFFFF;
	}
	
	
	
	
</style>